<template>
  <div>
    <UserAction />
    <div class="body">
      <div class="g-con">
        <el-card class="add-card">
          <template #header>
            <div class="card-header">
              <span class="title">{{ t('shipping.t1') }}</span>
              <el-button
                class="button"
                type="primary"
                @click="openAddDialog"
                >{{ t('shipping.b1') }}</el-button
              >
            </div>
          </template>
          <!-- <div class="card-content" v-if="addShipVis">
                        <div class="left">
                            <Uploads ref="upload1" @change="setFileList" :listType="'picture'"></Uploads>
                        </div>
                        <div class="right">
                            <el-form label-position="left" label-width="140px">
                                <el-row :gutter="36">
                                    <el-col :span="12">
                                        <el-form-item label-align="left" :label="t('shipping.l1')+':'">
                                            <el-input v-model="addForm.shippingName"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label-align="left" :label="t('shipping.l2')+'.:'">
                                            <el-input-number v-model="addForm.shippingNo"></el-input-number>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label-align="left" :label="t('shipping.l3')+':'">
                                            <el-select v-model="addForm.shippingType">
                                                <el-option v-for="child in dictData.ships_type" :key="child.id"
                                                    :value="child.dictValue" :label="child.dictLabel">{{ child.dictLabel
                                                    }}</el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label-align="left" :label="t('shipping.l4')+':'">
                                            <el-input v-model="addForm.portRegistry"> </el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label-align="left" :label="t('shipping.l5')+':'">
                                            <el-select v-model="addForm.nationality">
                                                <el-option v-for="child in countryOptionList" :key="child.countryCode"
                                                    :value="child.countryName" :label="child.countryName">{{
                                                        child.countryName }}</el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label-align="left" :label="t('shipping.l6')+':'">
                                            <el-select v-model="addForm.classificationSociety">
                                                <el-option v-for="child in dictData.classification_society" :key="child.id"
                                                    :value="child.dictValue" :label="child.dictLabel">{{ child.dictLabel
                                                    }}</el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label-align="left" :label="t('shipping.l7')+':'">
                                            <el-input v-model="addForm.shipowner"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label-align="left" :label="t('shipping.l8')+':'">
                                            <el-input v-model="addForm.shipManagement"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label-align="left" :label="t('shipping.l9')+':'">
                                            <el-input v-model="addForm.constructionPlant"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label-align="left" :label="t('shipping.l10')+':'">
                                            <el-date-picker @change="dateChange($event, 'yearOfConstruction')"
                                                v-model="dateValue" type="year" placeholder="Pick a year" />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label-align="left" :label="t('shipping.l11')+':'">
                                            <el-input-number v-model="addForm.deadweightTon"></el-input-number>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label-align="left" :label="t('shipping.l12')+':'">
                                            <el-input-number v-model="addForm.totalLength"></el-input-number>
                                        </el-form-item>
                                    </el-col>

                                    <el-col :span="12">
                                        <el-form-item label-align="left" :label="t('shipping.l13')+':'">
                                            <el-input-number
                                                v-model="addForm.lengthBetweenPerpendiculars"></el-input-number>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label-align="left" :label="t('shipping.l14')+':'">
                                            <el-input-number v-model="addForm.moldedDepth"></el-input-number>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label-align="left" :label="t('shipping.l15')+':'">
                                            <el-input-number v-model="addForm.model"></el-input-number>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label-align="left" :label="t('shipping.l16')+':'">
                                            <el-input-number v-model="addForm.draught"></el-input-number>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label-align="left" :label="t('shipping.l17')+':'">
                                            <el-input-number v-model="addForm.lightTon"></el-input-number>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label-align="left" :label="t('shipping.l18')+':'">
                                            <el-input-number v-model="addForm.grossTon"></el-input-number>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label-align="left" :label="t('shipping.l19')+':'">
                                            <el-select v-model="addForm.electricalSystem">
                                                <el-option v-for="child in dictData.electrical_system" :key="child.id"
                                                    :value="child.dictValue" :label="child.dictLabel">{{ child.dictLabel
                                                    }}</el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label-align="left" :label="t('shipping.l20')+':'">
                                            <el-input v-model="addForm.host"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>
                            <div class="btn-list">
                                <el-button type="primary" style="width: 160px">Cancel</el-button>
                                <el-button type="primary" style="width: 160px" @click="addSave">Save</el-button>
                            </div>
                        </div>
                    </div> -->
        </el-card>

        <el-card
          class="card"
          v-for="item in shippingList"
          :key="item.id"
        >
          <div class="card-content">
            <div class="left">
              <img :src="item.picture" />

              <div class="mt-3">
                <el-button
                  type="primary"
                  style="width: 100%"
                  @click="open(item, 'dockRepair')"
                  >{{ t('shipping.b4') }}</el-button
                >
              </div>
              <div class="mt-2">
                <el-button
                  type="primary"
                  style="width: 100%"
                  @click="open(item, 'procurement')"
                  >{{ t('shipping.b5') }}</el-button
                >
              </div>
              <div class="mt-2">
                <el-button
                  type="primary"
                  style="width: 100%"
                  @click="open(item, 'externalAssistance')"
                  >{{ t('shipping.b6') }}</el-button
                >
              </div>
            </div>
            <div class="right">
              <el-form
                label-position="left"
                label-width="140px"
                label-suffix=": "
              >
                <div
                  class="grid-2"
                  style="column-gap: 40px"
                >
                  <el-form-item :label="t('shipping.l1')">
                    <span>{{ item.shippingName }}</span>
                  </el-form-item>

                  <el-form-item :label="t('shipping.l2')">
                    <span>{{ item.shippingNo }}</span>
                  </el-form-item>

                  <el-form-item :label="t('shipping.l3')">
                    <span>
                      {{ getDictLabel('ships_type', item.shippingType) }}
                    </span>
                  </el-form-item>

                  <!-- <el-form-item
                    :label="t('shipping.l4')"
                  >
                    <span>{{ item.portRegistry }}</span>
                  </el-form-item> -->

                  <el-form-item :label="t('shipping.l5')">
                    <span>{{ item.nationality }}</span>
                  </el-form-item>

                  <el-form-item :label="t('shipping.l10')">
                    <span>{{ item.yearOfConstruction }}</span>
                  </el-form-item>

                  <el-form-item :label="t('shipping.l6')">
                    <span>
                      {{ getDictLabel('classification_society', item.classificationSociety) }}
                    </span>
                  </el-form-item>

                  <el-form-item :label="t('shipping.l9')">
                    <span>{{ item.constructionPlant }}</span>
                  </el-form-item>

                  <el-form-item :label="t('shipping.l11')">
                    <span>{{ item.deadweightTon }} MT</span>
                  </el-form-item>

                  <el-form-item :label="t('shipping.l12')">
                    <span>{{ item.totalLength }} M</span>
                  </el-form-item>

                  <el-form-item :label="t('shipping.l18')">
                    <span>{{ item.grossTon }} MT</span>
                  </el-form-item>

                  <el-form-item :label="t('shipping.l15')">
                    <span>{{ item.model }} M</span>
                  </el-form-item>

                  <el-form-item :label="t('shipping.l14')">
                    <span>{{ item.moldedDepth }} M</span>
                  </el-form-item>

                  <el-form-item :label="t('shipping.l7')">
                    <span>{{ item.shipowner }}</span>
                  </el-form-item>

                  <el-form-item :label="t('shipping.l20')">
                    <span>{{ item.host }}</span>
                  </el-form-item>

                  <el-form-item :label="t('shipping.l8')">
                    <span>{{ item.shipManagement }}</span>
                  </el-form-item>

                  <!-- <el-form-item
                    :label="t('shipping.l13')"
                  >
                    <span>{{ item.lengthBetweenPerpendiculars }} m</span>
                  </el-form-item> -->

                  <!-- <el-form-item
                    :label="t('shipping.l16')"
                  >
                    <span>{{ item.draught }} m</span>
                  </el-form-item>

                  <el-form-item
                    :label="t('shipping.l17')"
                  >
                    <span>{{ item.lightTon }} MT</span>
                  </el-form-item> -->

                  <!-- <el-form-item
                    :label="t('shipping.l19')"
                  >
                    <span>
                      {{ getDictLabel('electrical_system', item.electricalSystem) }}
                    </span>
                  </el-form-item> -->
                </div>
              </el-form>
              <div class="btn-list flexec">
                <el-button
                  type="primary"
                  style="width: 160px"
                  @click="handleEdit(item)"
                  >{{ t('shipping.b2') }}</el-button
                >
                <el-button
                  type="primary"
                  style="width: 160px"
                  @click="delFn(item.id)"
                  >{{ t('shipping.b3') }}</el-button
                >
              </div>
            </div>
          </div>
        </el-card>

        <div class="flexcc mt-3">
          <el-pagination
            layout="prev, pager, next"
            :hide-on-single-page="total <= page.pageSize"
            :total="total"
            v-model:current-page="page.pageNum"
            :page-size="page.pageSize"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <AddShip
      v-if="addShipVis"
      v-model:visible="addShipVis"
      :editId="editId"
      :dialogType="dialogType"
      @emitGetList="getList"
    />
  </div>
</template>

<script setup>
import Uploads from '@/components/Uploads.vue'
import UserAction from '@/components/UserAction.vue'
import AddShip from '@/components/AddShip.vue'
import { shippingListApi, addShippingApi, editShippingApi, deleteShipping } from '@/service/shipping'
import { countryListApi } from '@/service/common.js'
import { onMounted, ref, watch } from 'vue'
import { uploads } from '@/service/common.js'
import { dateFormat, openUrl } from '@/utils'
import useDict from '@/hooks/useDict'
import { useI18n } from 'vue-i18n'
import { useRouter, useRoute } from 'vue-router'
import useLogin from '@/stores/login'

const router = useRouter()

const { dictData, getDictData, getDictLabel } = useDict()
const { t, locale } = useI18n()
watch(locale, () => {
  init()
})

const storeLogin = useLogin()

const dialogType = ref('')
const addShipVis = ref(false)
watch(addShipVis, (n) => {
  if (!n) {
    editId.value = null
  }
})
const shippingList = ref([])
// const queryForm = ref({
//   enterpriseId: storeLogin.userInfo.enterpriseId,
//   pageSize: 4,
//   pageNum: 1
// })
const addForm = ref({
  // enterpriseId: storeLogin.userInfo.enterpriseId,
  picture: undefined
})
const FileList = ref([])
const upload1 = ref(null)
const setFileList = (val) => {
  FileList.value = val
}
const handleUpload = (ref, list) => {
  return new Promise((resolve, reject) => {
    const newList = list.value.filter((item) => item.raw)
    const oldList = list.value.filter((item) => !item.raw).map((item) => item.url)

    if (newList.length) {
      const formData = new FormData()
      newList.forEach((item) => {
        formData.append('files', item.raw)
      })
      uploads(formData).then(({ urls }) => {
        const resultFile = urls.split(',')
        list.value = resultFile.map((item) => {
          return {
            name: item.slice(item.lastIndexOf('/') + 1),
            url: item
          }
        })
        // ref.value.setFileList(list)
        resolve([...oldList, ...resultFile])
      })
    } else {
      resolve(oldList)
    }
  })
}
//新增船舶
// const addSave = async () => {
//     let res = await handleUpload(upload1, FileList);
//     if (res.length) {
//         addForm.value.picture = res.join();
//     }
//     addShippingApi(addForm.value).then((res) => {
//         ElMessage({
//             message: "操作成功",
//             type: "success",
//         });
//         addForm.value = {
//             enterpriseId: JSON.parse(localStorage.getItem("login")).userInfo
//                 .enterpriseId,
//         };
//         addShipVis.value = false;
//         getList();
//     });
// };

//编辑
const editId = ref(null)
const handleEdit = (row) => {
  editId.value = row.id
  dialogType.value = 'edit'
  addShipVis.value = true
}

//删除
const delFn = (id) => {
  ElMessageBox.confirm(t('shipping.c1'), '', {
    confirmButtonText: t('confirmText'),
    cancelButtonText: t('cancelText'),
    type: 'warning'
  })
    .then(() => {
      deleteShipping(id).then(({ msg }) => {
        ElMessage({
          type: 'success',
          message: msg
        })
        getList()
      })
    })
    .catch(() => {})
}
const openAddDialog = () => {
  addShipVis.value = true
  dialogType.value = 'add'
}

const page = ref({
  pageNum: 1, // 当前页码
  pageSize: 4 // 每页条数
})
const total = ref(0) // 总数
const getList = () => {
  if (!storeLogin?.userInfo?.enterpriseId) return
  shippingListApi({
    ...page.value,
    enterpriseId: storeLogin.userInfo.enterpriseId
  }).then(({ rows, total: t }) => {
    shippingList.value = rows.map((item) => {
      item.dateValue = item.yearOfConstruction
      return item
    })
    total.value = t
  })
}
// 分页
const handleCurrentChange = (val) => {
  getList()
}

// 发起
const open = (item, type) => {
  if (type === 'dockRepair') {
    openUrl(`/dockRepair`, { shippingId: item.id})
  }
  if (type === 'procurement') {
    openUrl(`/procurement`, { shippingId: item.id})
  }
  if (type === 'externalAssistance') {
    openUrl(`/externalAssistance`, { shippingId: item.id})
  }
}

const dateValue = ref(undefined)
const dateChange = (val, key) => {
  if (val) {
    // 10位时间戳
    addForm.value[key] = String(val).substring(0, 10) * 1
  } else {
    addForm.value[key] = null
  }
}
const itemDateChange = (val, key, item) => {
  if (val) {
    // 10位时间戳
    item[key] = String(val).substring(0, 10) * 1
  } else {
    item[key] = null
  }
}
const countryOptionList = ref([])
const init = () => {
  getDictData('ships_type') //船型
  getDictData('classification_society') //船级社
  getDictData('electrical_system') //电至
  countryListApi().then((res) => {
    countryOptionList.value = res.data
  })
  getList()
}
onMounted(() => {
  init()
})
</script>
<style scoped lang="scss">
.body {
  width: 100%;
  background: rgba(245, 245, 245, 1);
  padding-top: 30px;
  padding-bottom: 130px;
  margin-bottom: -80px;

  .g-con {
    .add-card {
      .btn-list {
        display: flex;
        justify-content: end;
      }
    }

    .card,
    .add-card {
      width: 100%;
      padding-left: 34px;
      min-height: 60px;
      margin-top: 30px;

      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .title {
          font-size: 20px;

          font-weight: bold;
          color: #ca2a02;
        }
      }

      :deep(.el-card__header) {
        border-bottom: 2px solid black;
      }

      .card-content {
        width: 100%;
        display: flex;

        .left {
          width: 272px;
          height: 100%;
          margin-right: 24px;
          padding-top: 32px;

          img {
            width: 100%;
            height: 180px;
            object-fit: contain;
            background: #f9f9f9;
          }
        }

        .right {
          flex: 1;
          padding-top: 32px;

          :deep(.el-descriptions__label),
          :deep(.el-form-item__label) {
            font-size: 12px;

            font-weight: 400;
            color: #9d9fa5;
            line-height: 24px;

            &::before {
              content: '*';
              color: red;
              margin-right: 2px;
            }
          }

          :deep(.my-label) {
            width: 140px;
            display: inline-block;
          }

          :deep(.el-descriptions__content),
          :deep(.el-form-item__content) {
            font-size: 12px;

            font-weight: 400;
            color: #252628;
            line-height: 24px;
          }

          .btn-list {
            margin-top: 20px;
            padding-left: 20px;
          }
        }
      }
    }
  }
}
</style>
